<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>代理</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #eeeeee;
        }

        .headbox {
            background: #ffffff;
            margin: 12px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 70px;
            padding: 0 10px;
        }

        .head {
            display: flex;
        }

        .headS {
            width: 50px;
            height:50px;
            border-radius: 50%;
        }

        .usernamebox {
            padding-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 50px;
        }

        .username {
            font-family: "黑体";
        }

        .dlLv {
            color: #f9b82e;
        }
		.dlLv img{
			width:15px;
			float:left;
		}
		.dlLv span{
			font-size: 12px;
			line-height:15px;
		}
        .yue {
            font-weight: bold;
        }

        .chongzhi {
            background: #ffffff;
            padding-bottom: 15px;
        }

        .yuecz {
            height: 60px;
            line-height: 60px;
            margin-left: 10px;
            border-bottom: 1px solid #eeeeee;
            margin-bottom: 15px;
        }

        .czbutton {
            width: 90%;
            height: 70px;
            border: 1px solid #ff3b43;
            border-radius: 10px;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            margin: 0 auto;
            color: #ff3b43;
            margin-bottom: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .czbutton .tips {
            font-size: 12px;
            font-weight: normal;
            color: #999999;
        }

        .czbutton .tips span {
            color: #ff3b43;
        }
		.czbutton p:nth-child(1){
			font-size:18px;
		}
        .czactive {
            background: #ff3b43 !important;
            color: #ffffff !important;
        }

        .czactive .tips {
            color: #ffffff !important;
        }

        .czactive .tips span {
            color: #ffffff !important;
        }

        .detail {
            font-size: 12px;
            color: #666666;
            text-align: center;
            margin-top: 30px;
        }

        .detail a {
            color: #ff3b43;
        }
    </style>
    <link href="css/PowerUsers_Css.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/public.js"></script>
    <script type="text/javascript" src="js/user/proxy.js"></script>
</head>
<body>
<jsp:include page="/public.jsp"/>

<form id="payinfo" method="post" action="/except/files/recharge.jsp">
    <input type="hidden" name="indenttype" id="4"/>
    <input type="hidden" name="nonce_str" id="nonce_str"/>
    <input type="hidden" name="result_sign" id="result_sign"/>
    <input type="hidden" name="timestamp" id="timestamp"/>
    <input type="hidden" name="prepay_id" id="prepay_id"/>
</form>

<div class="headbox">
    <div class="head">
        <div><img class="headS" id="headimg" src="img/header2.jpg" onerror="imgerror(this, 'img/header2.jpg');"/></div>
        <div class="usernamebox">
            <p class="username" id="nickname"></p>
            <p class="dlLv"><img style='float:left;' src='img/radioVB.png' id="proxyimg"/><span id="proxytype"></span></p>
        </div>
    </div>
    <div class="yue">余额：￥<span id="sparemoney"></span></div>
</div>
<div class="chongzhi">
    <p class="yuecz">余额充值</p>
    <div>
        <div class="czbutton cz500">
            <p id="firstmoney"></p>
            <p class="tips" id="firstdesc">免费升级为<span>银牌代理</span></p>
        </div>
        <div class="czbutton cz2000">
            <p id="secondmoney"></p>
            <p class="tips" id="seconddesc">免费升级为<span>金牌代理</span></p>
        </div>
        <div class="czbutton cz5000">
            <p id="thirdmoney"></p>
            <p class="tips" id="thirddesc">免费升级为<span>钻石代理</span></p>
        </div>
        <div class="czbutton cz10000">
            <p id="forthmoney"></p>
            <p class="tips" id="forthdesc">免费升级为<span>至尊代理</span></p>
        </div>
    </div>
</div>
<div class="detail">
    <p>升级后可享受更高优惠</p>
    <p><a href="files/shop/shopprice.jsp">查看详情</a></p>
</div>


<div id="background"
     style="background: rgba(0,0,0,0.5);height: 100%;width: 100%;position: fixed;top: 0;display: none;"></div>
<div class="cqchoosenum">
    <div class="pop_pay">
        <div class="pop_title">
            <div class="pop_cancel">
                <img src="img/cancel.png" onclick="showPopup()"/>
            </div>
            <div class="title">支付信息</div>
        </div>
        <hr style="height: 1px; width: 100%; float: right; background-color: #f4f4f4; border: none;"/>
        <div class="clearboth"></div>
        <div class="pay_style" id="paytype">
            <span class="span_one">支付方式</span>
            <%--<input class="radio_type" id="usersparemoney" type="radio" name="spare_money" value="1"/> <span class="span_two" id="spare_money_show">余额(￥200.00)</span>--%>
            <input class="radio_type" id="wechat" type="radio" checked="checked" name="spare_money" value="2"/> <span
                class="span_two">微信支付</span>
        </div>
        <hr style="height: 1px; width: 97%; float: right; background-color: #f4f4f4; border: none;"/>
        <div class="pay_money_div">
            <span style="font-size: 16px;">应付金额</span>
            <span class="pay_money" id="paymoney"></span>
        </div>

        <!-- 确认支付 -->
        <div id="buy" class="buy_bg">
            <span class="pays" id="paybtn" onclick="pay()">确认支付</span>
        </div>
    </div>
</div>

<jsp:include page="/files/public_hint.jsp"/>

<script type="text/javascript">
    $(function () {
        $('.czbutton').on("tap", function () {
            $(this).parent().find(".czbutton").removeClass("czactive");
            $(this).addClass("czactive");
            var price = $(this).find("p").html();
            price = price.replace("元", "");
            $("#paymoney").html("￥:" + price);
            var clickid = $(this).find("p").attr("id");
            $("#paybtn").attr("onclick", "pay('" + clickid + "')");
            showPopup();
        });
    });

    function showPopup() {
        if ($(".cqchoosenum").hasClass("pop_payss")) {
            $(".cqchoosenum").removeClass("pop_payss");
            $("#background").hide();
        } else {
            $(".cqchoosenum").addClass("pop_payss");
            $("#background").show();
        }
    }
</script>
</body>
</html>
